<template>
  <div class="container-list">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="img-container"
      @mouseenter="showText(index)"
      @mouseleave="hideText(index)"
    >
      <img :src="item.url" class="img" />
      <div v-show="item.showText" class="bg">
        <button @click="BackgroundImage(item.name)" type="button">
          设为背景图
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { openDB, getAllData } from "@/util/image.js";
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
export default {
  name: "bgimglist",
  setup() {
    let list = ref(null);
    const store = useStore();
    onMounted(() => {
      openDB("web", 1).then((db) => {
        getAllData(db, "imglist").then((res) => {
          list.value = res.map((item) => ({
            ...item,
            showText: false,
          }));
        });
        db.close();
      });
    });

    // beforeUnmount(() => {
    //   list.value.forEach((element) => {
    //     URL.revokeObjectURL(element.value);
    //   });
    // });

    const showText = (index) => {
      list.value[index].showText = true;
    };

    const hideText = (index) => {
      list.value[index].showText = false;
    };

    const BackgroundImage = (value) => {
      store.commit("setvide", false);
      store.commit("imgUrl", value);
    };

    return {
      list,
      showText,
      hideText,
      BackgroundImage,
    };
  },
};
</script>

<style scoped>
.container-list {
  padding: 10px;
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  overflow-y: auto;
  background: linear-gradient(45deg, #1e2a3a, #3b4a61);
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 6px 25px rgba(78, 78, 78, 0.5);
}

.img-container {
  width: 140px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 15px;
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.img-container:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5);
}
.img {
  position: relative;
  width: 140px;
  max-height: 80px;
  object-fit: contain;
  border-radius: 10px;
  transition: opacity 0.3s ease;
}
.img-container:hover .img {
  opacity: 0.8;
}
.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  font-size: 22px;
  z-index: 9;
  color: red;
}
</style>
